<template>
  <div class="top-bar">
      <div class="left"><span class="iconfont iconlive"></span></div>
      <div class="middle">
          <div class="item">
              <span class="active">同城</span>
          </div>
          <div class="item">
              <span>关注</span>
          </div>
          <div class="item">
              <span>推荐</span>
          </div>
      </div>
      <div class="right"><span class="iconfont iconsousuo"></span></div>
  </div>
</template>

<script>
export default {};
</script>
<style  scoped>
    .top-bar{width: 100%;height: 50px;padding: 20px;font-size: 18px; color:#da4a4a; display: flex;box-sizing: border-box;position: fixed;z-index: 999;}
    .left, .right{width: 20%;}
    .top-bar .middle{width: 60%; display: flex; justify-items: center;}
    .top-bar .middle .item{flex: 1; text-align: center;}
    .right{text-align: right;}
    .active{font-weight: bold; border-bottom: 2px solid #000;}
</style>